<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            color: #fff;
            text-align: center;
        }

        #content {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: minmax(100px, auto);
            max-width: 960px;
            margin: 0 auto;
            grid-gap: 10px;
            grid-template-areas:
                    "header header header header"
                    "aside . main main"
                    "nav . main main"
                    "section section section section"
                    "section section section section"
                    "footer footer footer footer";
        }

        #content>* {
            background: #3bbced;
            /*padding: 30px;*/
        }

        header { grid-area: header; }
        main   { grid-area: main; }
        section{ grid-area: section; }
        aside  { grid-area: aside; }
        nav    { grid-area: nav; }
        footer { grid-area: footer; }
    </style>
</head>
<body>
<div id="content">
    <header>Header</header>
    <main>Main</main>
    <section>Section</section>
    <aside>Aside</aside>
    <nav>Nav</nav>
    <footer>Footer</footer>
</div>
</body>
</html>